<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1,minimum-scale=1"
		/>
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
				background-color: #ccc;
			}
			.container {
				height: 300px;
				width: 300px;
				margin-left: 50px;
				margin-top: 20px;
				background: url('img/0200605104153.jpg') no-repeat;
				background-size: cover;
				overflow: hidden;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="btnDiv">
			<button id="captureBtn">截图</button>
		</div>
		<div id="container" class="container"></div>
	</body>
</html>
<script src="js/html2canvas.min.js"></script>
<script src="js/canvasot.min.js"></script>
<script>
	let capture = new Canvasot(document.getElementById('container'));
	let captureBtn = document.getElementById('captureBtn');
	captureBtn.addEventListener('click', capture.handleCaptrue.bind(capture));
	// 这里需要注册一个函数，在截图之后自动调用
	// 默认截图成功之后会自动下载图片
	capture.RegisterAfterCapture(function (err, data) {
		// data是base64
		if (err) {
			console.log(err);
			return;
		}
		console.log('截图成功');
		console.log(data);
	});
</script>
